<template>
    <div id="nav">
        <ul>
            <li>
                <router-link to="/">
                    推荐
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'homeothers-view',query:{name:'居家生活'}}">
                    居家生活
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'homeothers-view',query:{name:'服饰鞋包'}}">
                服饰鞋包
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'homeothers-view',query:{name:'美食酒水'}}">
                美食酒水
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'homeothers-view',query:{name:'个护清洁'}}">
                个护清洁
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'homeothers-view',query:{name:'母婴亲子'}}">
                母婴亲子
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'homeothers-view',query:{name:'运动旅行'}}">
                运动旅行
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'homeothers-view',query:{name:'数码家电'}}">
                数码家电
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'homeothers-view',query:{name:'严选全球'}}">
                严选全球
                </router-link>
            </li>
        </ul>
    </div>
    <router-view/>
</template>

<script>
    import {getBanner} from "../../api";

    export default {
        name: "HomeTabBarzxw",
        data(){
            return{
                message:[]
            }
        },
        mounted() {
            getBanner('/fenlei-list')
                .then(response=>{
                    this.message = response.data
                })
        }
    }
</script>

<style scoped>
    #nav{
        width: 100%;
        height: 30px;
        margin-bottom: 5px;
        overflow: scroll;
    }
    div::-webkit-scrollbar{
        display: none;
    }
    ul{
        width:900px;
        height: 100%;
    }
    li{
        width: 100px;
        height: 100%;
        float: left;
        text-align: center;
        font-size: 14px;
        line-height: 30px;
    }
    /*a.router-link-exact-active {*/
    /*    display: block;*/
    /*    border-bottom: 1px solid red;*/
    /*}*/
</style>